<template>
  <div>
    vue3的声明周期
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue'

// 创建后
console.log("setup")

// 挂载前
onBeforeMount(() => { console.log("onBeforeMount") })
// 挂载完毕
onMounted(() => { console.log("onMounted") })

// 更新前
onBeforeUpdate(() => { console.log("onBeforeUpdate") })
// 更新完毕
onUpdated(() => { console.log("onUpdated") })

// 卸载前
onBeforeUnmount(() => { console.log("onBeforeUnmount") })
// 卸载完毕
onUnmounted(() => { console.log("onUnmouted") })
</script>

<style lang="scss" scoped>

</style>